<template>
	<view class="person-info-box">
		<!-- 头像 -->
		<view class="person-info-item">
			<text>头像</text>
			<view style="display: flex;align-items: center;">
				<image :src="imagesUrl('user-pic.png')" mode="widthFix"
					style="width: 72rpx;height: 72rpx;vertical-align: middle;border-radius: 50%;" />

				<!-- 右侧箭头图标 -->
				<uni-icons type="forward" size="14" class="right-icon"></uni-icons>
			</view>
		</view>

		<!-- 昵称 -->
		<view class="person-info-item" @click="goToPage(`/pages/settings/ChangeName?currentName=${currentName}`)">
			<text>昵称</text>
			<view>
				<text class="color999">{{currentName}}</text>

				<!-- 右侧箭头图标 -->
				<uni-icons type="forward" size="14" class="right-icon"></uni-icons>
			</view>
		</view>

		<!-- 性别 -->
		<view class="person-info-item">
			<text>性别</text>
			<view @click="openPopup('sexPopupShow')">
				<text class="colorMain fontSize28" :class="{'color999':sex}">
					{{sex ? sex : '请选择'}}
				</text>

				<!-- 右侧箭头图标 -->
				<uni-icons type="forward" size="14" class="right-icon"></uni-icons>
			</view>
		</view>

		<!-- 性别的弹出层 -->
		<u-popup :show="sexPopupShow" :round="20" @close="closePopup('sexPopupShow')">
			<view class="sex-option" v-for="(item,index) in sexOptions" :key="index" @click="changeSex(item)">
				{{item}}
			</view>
		</u-popup>

		<!-- 生日 -->
		<view class="person-info-item">
			<text class="birth">生日</text>
			<view @click="openPopup('birthPopupShow')">
				<text class="colorMain fontSize24" :class="{'color999': myBirthday}">
					{{myBirthday?myBirthday:'完善信息，生日当天领取专属福利'}}
				</text>

				<!-- 右侧箭头图标 -->
				<uni-icons type="forward" size="14" class="right-icon"></uni-icons>
			</view>
		</view>

		<!-- 生日的弹出层 -->
		<u-picker :show="birthPopupShow" ref="uPicker" title="请选择您的生日" :columns="columns" visibleItemCount="10"
			@confirm="confirmBirth" @change="changeBirthHandler" @cancel="cancelBirth"></u-picker>

		<!-- ID -->
		<view class="person-info-item">
			<text>ID</text>
			<view style="display: flex;">
				<text class="color999">{{ID_number}}</text>

				<!-- 复制图标 -->
				<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="14" class="right-icon" @click="copyID">
				</uni-icons>
			</view>
		</view>

		<!-- 绑定手机号 -->
		<view class="person-info-item">
			<text>绑定手机号</text>
			<view class="color999" @click="goToPage('/pages/settings/ChangePhoneOne')">
				{{'18070535312'.slice(0,3) + '****' + '18070535312'.slice(-4)}}
				<!-- 右侧箭头图标 -->
				<uni-icons type="forward" size="14" class="right-icon"></uni-icons>
			</view>
		</view>

		<!-- 注销账号 -->
		<view class="cancel-number" @click="openPopup('cancelPopupShow')">
			注销账号
		</view>

		<!-- 注销账号的弹出层 -->
		<u-popup :show="cancelPopupShow" mode="center" :round="20" @close="closePopup('cancelPopupShow')">
			<view class="cancel-popup">
				<view class="cancel-popup-tit">
					<uni-icons type="info" color="#F51F43" size="18"
						style="vertical-align: bottom;margin-right: 10rpx;"></uni-icons>
					<text>注销账号须知</text>
				</view>
				<view>
					1、说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容
				</view>
				<view>
					1、说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容
				</view>
				<view>
					1、说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容
				</view>
				<view :class="cancelTime===0?'cancel-btn go-cancel':'cancel-btn'" @click="konwBtn">
					我已知晓<text v-show="cancelTime>0">（{{cancelTime}}s）</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const createArray = (start, end) => {
				return Array.from({
					length: end - start + 1
				}, (_, i) => i + start)
			}
			return {
				// 当前姓名
				currentName: '卜腾',
				// 性别
				sex: '',
				sexOptions: ['男', '女', '保密', '取消'],
				sexPopupShow: false,
				// 生日
				birthPopupShow: false,
				myBirthday: '',
				columns: [
					createArray(1980, 2023),
					createArray(1, 12),
					createArray(1, 31)
				],
				// ID
				ID_number: '897619340',
				// 注销
				cancelPopupShow: false,
				cancelTime: 5,
				timer: null
			}
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url
				})
			},
			// 打开弹出层
			openPopup(popup) {
				if (popup === 'birthPopupShow' && this.myBirthday !== '') {
					this[popup] = false
				} else if (popup === 'cancelPopupShow') {
					// 重置倒计时为5s
					this.cancelTime = 5
					// 弹出层
					this[popup] = true
					// 打开定时器
					this.openSetInterval()
				} else {
					this[popup] = true
				}
			},
			// 关闭弹出层
			closePopup(popup) {
				this[popup] = false
				if (popup === 'cancelPopupShow') {
					this.closeSetInterval()
				}
			},
			// 修改性别
			changeSex(v) {
				if (v !== '取消') {
					this.sex = v
				}
				// 关闭弹出层
				this.closePopup('sexPopupShow')
			},
			// 复制ID
			copyID() {
				uni.setClipboardData({
					data: this.ID_number
				})
			},
			// 改变生日
			changeBirthHandler(e) {
				const {
					value,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当前选中年份
				const y = value[0]
				// 当前选中月份
				const m = value[1]

				const nowDate = new Date()
				// 如果年份与当前相同
				if (nowDate.getFullYear() === y) {
					// console.log(nowDate.getFullYear())
					// console.log(nowDate.getMonth() + 1)

					// 修改到当前月份
					picker.setColumnValues(1, Array.from({
						length: nowDate.getMonth() + 1
					}, (_, i) => 1 + (i)))
					// console.log(nowDate.getDate())

					// 修改到当前日期
					picker.setColumnValues(2, Array.from({
						length: nowDate.getDate()
					}, (_, i) => 1 + (i)))
				} else {
					// 修改到当前月份
					picker.setColumnValues(1, Array.from({
						length: 12
					}, (_, i) => 1 + (i)))
					// 修改到当前日期
					picker.setColumnValues(2, Array.from({
						length: 31
					}, (_, i) => 1 + (i)))
					// 若月份为4、6、9、11 则当月30天
					if (m === 4 || m === 6 || m === 9 || m === 11) {
						picker.setColumnValues(2, Array.from({
							length: 30
						}, (_, i) => 1 + (i)))
					} else if (m === 2) {
						//判断当月是否为闰年的二月
						if ((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) {
							picker.setColumnValues(2, Array.from({
								length: 29
							}, (_, i) => 1 + (i)))
						} else if (y % 4 != 0) {
							picker.setColumnValues(2, Array.from({
								length: 28
							}, (_, i) => 1 + (i)))
						}
					} else {
						picker.setColumnValues(2, Array.from({
							length: 31
						}, (_, i) => 1 + (i)))
					}
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirmBirth(e) {
				// console.log('confirm', e)
				// console.log(e.value)
				this.myBirthday = e.value.join('-')
				this.closePopup('birthPopupShow')
			},
			cancelBirth() {
				console.log('cancel')
				this.closePopup('birthPopupShow')
			},
			// 我已知晓点击
			konwBtn() {
				if (this.cancelTime === 0) {
					// 关闭注销账号的弹出层
					this.closePopup('cancelPopupShow')
					// 跳转注销账号页面
					uni.navigateTo({
						url: '/pages/settings/CancelPhone'
					})
				}
			},
			// 打开定时器
			openSetInterval() {
				this.timer = setInterval(() => {
					this.cancelTime--
					// 倒计时为0时 清除定时器
					if (this.cancelTime === 0) {
						this.closeSetInterval()
					}
				}, 1000)
			},
			// 关闭定时器
			closeSetInterval() {
				clearInterval(this.timer)
				this.timer = null
			},
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		},
		onUnload() {
			// 离开页面 清除定时器
			if (this.timer) {
				this.closeSetInterval()
			}
		}
	}
</script>

<style lang="scss">
	.person-info-box {
		width: 100vw;
		font-size: 28rpx;

		// 个人资料的子项
		.person-info-item {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			line-height: 104rpx;
			background-color: #fff;

			// 生日栏 右侧提示
			.birth::after {
				display: inline-block;
				content: '仅允许填写一次';
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #999;
			}

			// 右侧图标
			.right-icon {
				margin-left: 20rpx;
			}

			.colorMain {
				color: #FF7803;
			}

			.fontSize24 {
				font-size: 24rpx;
			}

			.fontSize28 {
				font-size: 28rpx;
			}

			.color999 {
				color: #999;
			}
		}

		// 保存按钮
		.keep-name {
			width: 450rpx;
			margin: 40rpx auto;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #FF7803;
		}

		// 性别选项
		.sex-option {
			text-align: center;
			line-height: 90rpx;
			border-bottom: 1rpx solid #e3e3e3;
		}

		// 注销账号
		.cancel-number {
			margin-left: 30rpx;
			line-height: 80rpx;
			color: #999;
		}

		.cancel-popup {
			width: 504rpx;
			padding: 0 30rpx;
			line-height: 36rpx;
			color: #666;

			.cancel-popup-tit {
				line-height: 100rpx;
				text-align: center;
				color: #333;
			}

			.cancel-btn {
				width: 336rpx;
				margin: 20rpx auto;
				text-align: center;
				line-height: 88rpx;
				border-radius: 44rpx;
				color: #fff;
				background: #D0D0D0;

				&.go-cancel {
					background-color: #FF7803;
				}
			}
		}
	}
</style>
